const oBox = document.querySelector('.box');
const oUls = oBox.querySelectorAll('ul');
let start = 0;
let  newbool = true;

const imgArr = [
    {id:1,size:'29.7KB',width:800,height:333,name:'001.jpg'},
    {id:2,size:'19.3KB',width:500,height:333,name:'002.jpg'},
    {id:3,size:'17.1KB',width:500,height:333,name:'003.jpg'},
    {id:4,size:'20.3KB',width:500,height:333,name:'004.jpg'},
    {id:5,size:'320KB',width:600,height:400,name:'005.jpg'},
];

// 获取标签对象 
const oBanner = document.querySelector('.banner');

// 面向对象编程
// 调用构造函数 创建 轮播图 实例化对象
const bannerObj = new setBanner( oBanner , imgArr );
console.log( bannerObj );

// 通过实例化对象 调用 构造函数prototype中定义的函数方法
// bannerObj.setPage();
// bannerObj.autoLoop();
// bannerObj.setMouse();
// bannerObj.setClick();
// bannerObj.hid();

bannerObj.init();
setPage1();


let str = '';
//动态生成轮播图左边的列表，根据goods表中cat_one_id的数量从大到小排序，取前10个
//select cat_one_id ,count(cat_one_id) from goods group by cat_one_id order by count(cat_one_id) DESC  limit 0,10;
const xhr = myPromiseJQueryAjax( '../server/words_list.php' , 'post' , {num:10} , 'json' );
xhr.then(function(res){

  if( res.result === 0 ){
    console.log('无数据');
  }else if( res.result !== 0 ){
    console.log(res);

        res.forEach(function( item , key){
             str +=`
            <li><a href="./list.html?cat_one_id=${item.cat_one_id}" index = "${key}" >${item.cat_one_id}</a></li>
             `;
            
        })  
    $('.getlist').html(str);
  }
})

// 退出登录
$('[name="logout"]').click(function(){
// 先获取 cookie 对象
const cookieObj = myGetCookie();

if( cookieObj.login === '1' ){
    // 证明已经登录
    // 设定 login存储的数值 是 0
    // mySetCookie( 'login' , 0 , 7*24*60*60 , '/' );
    // 设定 login的时效是 负数 直接就是 时效过期
    // 浏览器自动删除这个 cookie
    mySetCookie( 'login' , 0 , -1 , '/' );
    mySetCookie( 'name' , null , -1 , '/' );

    window.alert('您已经退出登录了');
}else{
    // 还没有登录
    window.alert('您还没有登录,请您先登录');
}
});

// 跳转登录
$('[name="login"]').click(function(){
// 跳转登录页面 同时 携带 当前页面的url地址
window.location.href = `./login.html?url=${window.location.href}`;
})
// 跳转购物车
$('[name="cart"]').click(function(){
// 获取 cookie对象
const cookieObj = myGetCookie();

if( cookieObj.login === '1' ){
    // 已经登录 直接跳转 购物车页面
    window.location.href = './cart.html';
}else{
    if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
    window.location.href = `./login.html?url=${window.location.href}`;
    }
}
})

// 查看浏览记录
$('[name="looked"]').click(function(){
// 获取 cookie对象
const cookieObj = myGetCookie();

if( cookieObj.login === '1' ){
    // 已经登录 直接跳转 购物车页面
    window.location.href = './look.html';
}else{
    if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
    window.location.href = `./login.html?url=${window.location.href}`;
    }
}
})

//点击查找
$('[name = "search"]').click(function(){
    let mainword = $('[name = "lookword"]').val();
    let temp = 1;
    if(mainword == undefined || mainword==null || mainword == ''){
        return;
    }else{
        window.location.href = `./list.html?temp=${temp}&mainword=${mainword}`;
    }
})


$('[name ="ren"]').click(function(){
    // 获取 cookie对象
    const cookieObj = myGetCookie();

    if( cookieObj.login === '1' ){
            if( window.confirm('是否修改密码？？？') ){
            window.location.href = `./repassword.html`;
            }else{
                window.alert('不改密码点什么点！！！没功能了！！');
            }
    }else{
        if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
        window.location.href = `./login.html?url=${window.location.href}`;
        }
    }    
})

// 下方是瀑布流代码

    // 给 浏览器添加 滚动监听事件
window.addEventListener( 'scroll' , function(){
    // 获取 页面上卷高度 
    let top = document.documentElement.scrollTop;
    // 获取 视窗窗口高度
    let height = document.documentElement.clientHeight;
    // 设定预留高度 根据实际项目设定 网速快就小一些
    let h = 500;
    //  获取最矮ul标签对象
    //  最矮ul标签的占位是 标签对象.offsetHeight
    let min = oUls[0];
    oUls.forEach( item => {
        if( min.offsetHeight > item.offsetHeight ){
            min = item;
        }
    })


    if( $(window).scrollTop() > 500 ){
        // // 吸顶div 下拉显示 
        // $('.searchTop').slideDown();
        // // 吸顶div弹性盒子
        $('.searchTop').css('display' , 'block');
        // // 侧边栏li 减现显示
        $('.toTop').fadeIn();
    }else{
        // // 页面上卷高度 不大于 设定高度
        // // 吸顶div 上卷隐藏
        // $('.searchTop').slideUp();
        // // 侧边栏div 渐隐隐藏
        $('.toTop').fadeOut();
    }

    // 判断
    // 上卷高度 + 视窗高度 + 预留高度 > 最矮ul高度 
    if( top + height + h > min.offsetHeight ){
        // 再次调用函数 发送请求 动态生成页面
        setPage1();
    }
})

let temp=0;
    // 定义一个函数 动态渲染生成页面
    function setPage1(){

    // 如果 变量是原始值 就发送请求 不是原始值就执行return
    if( newbool == true || newbool == 'true' ){
        newbool = false;
        // console.log(987);
    }else{
        // console.log(789);
        return;
    }
    // 发送 ajax请求 动态获取数据
    const xhr = myPromiseJQueryAjax( '../server/waterfall.php' , 'post' , {num:24,start:start} , 'json' );
    xhr.then(function(result){
        console.log(result);
        // result = JSON.parse(result);
        console.log('www');
        // 给 start 变量 赋值 下一次查询起始索引下标
        temp++;
        start = result.length*temp;
        // 存储 24条数据的数组
        const arr = result;

        arr.forEach( item =>{
            // 根据图片的原始比例 先计算 图片父级div标签的高度
            // let height = parseInt( 260 * item.photo.height / item.photo.width );

            // 每次循环 都会生成 一个 li标签 
            let str = `
            <li class="list-item">
                <div class="panel panel-primary">
                    <div class="panel-body">
                    <ol class="breadcrumb">
                        <li><a href="./list.html?cat_one_id=${item.cat_one_id}">${item.cat_one_id}</a></li>
                        <li><a href="./list.html?cat_two_id=${item.cat_two_id}">${item.cat_two_id}</a></li>
                        <li class="active1"><a class="active" href="./list.html?cat_three_id=${item.cat_three_id}">${item.cat_three_id}</a></li>
                    </ol>
                    </div>
                    <div class="panel-footer">
                    <div class="row">
                        <div class="">
                        <div class="thumbnail">
                            <img src="${item.goods_big_logo}" alt="..." style="height:260px">
                            <div class="caption">
                            <h3>${item.goods_name}</h3>
                            <p>
                                <i class="glyphicon glyphicon-yen"></i>
                                <span>￥${item.goods_price}</span>
                            </p>
                            <p  class="btn9">
                                <a href="javascript:;" class="btn-primary"  role="button">查找相似商品</a> 
                                <a href="./detail.html?goods_id=${item.goods_id}" class="btn-danger"  role="button">查看商品详情</a>
                            </p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </li>
            
            `;                    
        
            // 查询最矮ul标签对象
            // 默认 第一个标签是最矮的ul标签对象
            let min = oUls[0];
            // 循环遍历所有的ul标签对象
            // item中存储的就是 ul标签对象
            oUls.forEach( item => {
                if( min.offsetHeight > item.offsetHeight ){
                    // min 变量中 存储 item的标签对象
                    min = item;
                }
            })
            min.innerHTML += str;
        })

        newbool = true;
    })
}


//点击返回顶部
$('.toTop').click(function(){
    $('html')   // 设定页面上卷高度 必须是 $('html')
    .animate( {scrollTop : 0 } , 1000 , 'linear' );
})